<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"/>
      </el-form-item>
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" placeholder="请输入作者"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="有效期范围" prop="daterange">
            <el-date-picker
              v-model="form.daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="客户端" prop="app" v-if="form.id">
          <el-radio-group v-model="form.app" v-for="item in roleOptions">
            <el-radio :label="item.dictValue" border style="margin-right: 10px;">{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="客户端" prop="appArray" v-else>
          <el-checkbox-group v-model="form.appArray">
            <el-checkbox v-for="item in roleOptions" :label="item.dictValue" :key="item.dictLabel" border>
              {{item.dictLabel}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-row>


      <el-form-item label="摘要" prop="desc">
        <el-input v-model="form.desc" type="textarea" :rows="2" placeholder="摘要"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Editor :value="form.content" @input="editorInput" @blur="editorBlur" :name="editorName"></Editor>
      </el-form-item>


      <el-form-item label="封面图片" prop="path">
        <UploadImage @change="imageChange" :path="form.path"></UploadImage>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
        <span v-if="!addLoading">提 交</span>
        <span v-else>提 交 中...</span>
      </el-button>
    </div>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  import Editor from '@/components/Editor';
  import {addBulletin, editBulletin} from "@/api/main/app/bulletin";

  export default {
    props: {
      row: {
        type: Object,
        require: false
      },
      statusOptions: {
        type: Array,
        require: false
      },
      roleOptions: {
        type: Array,
        require: false
      }
    },
    components: {UploadImage, Editor},
    data() {
      return {
        editorName: 'content',
        addLoading: false,
        form: {
          id: undefined,
          status: '1',
          app: '1',
          path: '',
          daterange: '',
          appArray:[]
        },
        rules: {
          daterange: [
            {type: 'array', required: true, message: '请选择有效期范围', trigger: 'change'},
          ],
          path: [
            {required: true, message: '请上传封面图片', trigger: 'change'},
          ],
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {max: 50, message: '标题不能超过50个字符', trigger: 'blur'}
          ],
          author: [
            {required: true, message: '请输入作者', trigger: 'blur'},
            {max: 50, message: '标题不能超过20个字符', trigger: 'blur'}
          ],
          desc: [
            {required: true, message: '请输入描述', trigger: 'blur'},
            {max: 255, message: '描述不能超过255个字符', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '请输入内容', trigger: 'blur'},
            {max: 65536, message: '内容不能超过65536个字符', trigger: 'blur'}
          ],
          appArray:[
            {type: 'array', required: true, message: '请至少选择一个客户端', trigger: 'change'},
          ]
        }
      }
    },
    created() {
      if (this.row) {
        console.log(this.row);
        let item = this.row;
        this.form = {
          id: item.id,
          status: item.status + "",
          app: item.app + "",
          content: item.content,
          author: item.author,
          desc: item.desc,
          title: item.title,
          path: item.path,
          daterange: [item.starttime, item.endtime],
          attachId: item.attachId
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.starttime = this.form.daterange[0];
            this.form.endtime = this.form.daterange[1];
            this.addLoading = true;
            if (this.form.id) {
              editBulletin(this.form).then(response => {
                this.msgSuccess("编辑成功");
                this.$emit('goBack', 'editBulletin');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            } else {
              let appList=[];
              console.log(this.form.appArray);
              for(let i=0;i<this.form.appArray.length;i++){
                let params=JSON.parse(JSON.stringify(this.form));
                params.app=this.form.appArray[i];
                appList.push(
                  new Promise((resolve, reject) => {
                  addBulletin(params).then(response => {
                    if(response.code===200){
                      resolve(response);
                    }else{
                      reject();
                    }
                  })
                }));
              }
              Promise.all(appList).then((result) => {
                console.log(result);
                this.msgSuccess("添加成功");
                this.$emit('goBack', 'editBulletin');
              }).catch((error) => {
                console.log(error);
                _this.addLoading = false;
              });
            }

          }
        });
      },
      editorBlur(message) {
        this.$refs.form.validateField(message);
      },
      editorInput(message) {
        this.$set(this.form, message.name, message.content);
      },
      imageChange(message) {
        this.$set(this.form, 'path', message);
        this.$refs.form.validateField('path');
      },
    }
  }
</script>

<style scoped>

</style>
